<template>
  <div class="_main">
    <!-- <div style="font-size: 30px; font-weight: 500">今天，</div>
    <div style="font-size: 13px; font-family: fantasy">
      {{ time }}，欢迎您回到淘个够后台操作系统，累计售出{{
        1000
      }}件商品，继续加油~
    </div> -->
    <div>
      <template>
        <el-row :gutter="20">
          <el-col
            :lg="{ span: '4-8' }"
            class="card-panel-col"
            v-for="(item, i) of cardList"
            :key="i"
          >
            <el-card shadow="hover">
              <div class="el_card">
                <img :src="item.svg" />
                <span>
                  <span>{{ item.title }}</span> <br />
                  <span>123</span>
                </span>
              </div>
            </el-card></el-col
          >
        </el-row>
      </template>
      <template>
        <el-card class="pend" shadow="hover">
          <template slot="header">
            <span>待处理事务</span>
          </template>
          <template>
            <el-row :gutter="20">
              <el-col :span="8" v-for="(item, i) of pendList" :key="i">
                <div class="list">
                  {{ item.title }}
                  <span> <span>(</span>10<span>)</span> </span>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-card>
      </template>
      <template>
        <el-card class="quick_entry" shadow="hover">
          <template slot="header">
            <span>运营快捷入口</span>
          </template>
          <template>
            <el-row>
              <el-col :span="3" v-for="(item, i) in enterList" :key="i">
                <div class="enterIcon" @click="goto(item)">
                  <div>
                    <img :src="item.svg" />
                    <div>{{ item.title }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-card>
      </template>
      <template>
        <el-row :gutter="20" class="view">
          <el-col :span="12" v-for="(item, i) of goodsUserList" :key="i">
            <el-card shadow="hover">
              <template slot="header">
                <span>{{ item.title }}</span>
              </template>
              <el-row :gutter="20">
                <el-col
                  class="text"
                  :span="6"
                  v-for="(_item, i) of item.list"
                  :key="i"
                >
                  <p>100</p>
                  <span>{{ _item.title }}</span>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </template>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      cardList: [
        { title: "今日订单总数", code: "xxx", svg: require("./svg/list.svg") },
        {
          title: "今日访问总量",
          code: "xxx",
          svg: require("./svg/traffic.svg"),
        },
        { title: "今日销售总额", code: "xxx", svg: require("./svg/sales.svg") },
        { title: "昨日销售总额", code: "xxx", svg: require("./svg/money.svg") },
        {
          title: "近7天销售总额",
          code: "xxx",
          svg: require("./svg/seven.svg"),
        },
      ],
      //待处理事务
      pendList: [
        { title: "待付款订单", code: "xxx" },
        { title: "已完成订单", code: "xxx" },
        { title: "待确认退货订单", code: "xxx" },
        { title: "代发货订单", code: "xxx" },
        { title: "新缺货登记", code: "xxx" },
        { title: "待处理退款申请", code: "xxx" },
        { title: "已发货订单", code: "xxx" },
        { title: "待处理退货订单", code: "xxx" },
        { title: "广告位即将到期", code: "xxx" },
      ],
      //运营快捷入口
      enterList: [
        {
          title: "添加商品",
          path: "addcommodity",
          svg: require("./svg/add.svg"),
          menue: "商品",
        },
        { title: "订单列表", path: "xxx", svg: require("./svg/list1.svg") },
        { title: "用户管理", path: "xxx", svg: require("./svg/user.svg") },
        { title: "交易统计", path: "xxx", svg: require("./svg/trad.svg") },
        { title: "广告管理", path: "xxx", svg: require("./svg/admanage.svg") },
        { title: "专题管理", path: "xxx", svg: require("./svg/ztmanage.svg") },
        { title: "秒杀管理", path: "xxx", svg: require("./svg/seckill.svg") },
        { title: "新品推荐", path: "xxx", svg: require("./svg/new.svg") },
      ],
      //商品总览&用户总览
      goodsUserList: [
        {
          title: "商品总览",
          list: [
            { title: "已下架", code: "xxx" },
            { title: "已上架", code: "xxx" },
            { title: "库存紧张", code: "xxx" },
            { title: "全部商品", code: "xxx" },
          ],
        },
        {
          title: "用户总览",
          list: [
            { title: "今日新增", code: "xxx" },
            { title: "昨日新增", code: "xxx" },
            { title: "本月新增", code: "xxx" },
            { title: "会员总数", code: "xxx" },
          ],
        },
      ],
      time:
        dayjs(new Date()).format("YYYY年MM月DD日周") +
        ["天", "一", "二", "三", "四", "五", "六"][new Date().getDay()],
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style lang="less" scoped>
._main {
  .view {
    margin-top: 20px;
    .text {
      text-align: center;
      > p {
        color: #f04844;
        font-size: 28px;
      }
      > span {
        color: #666;
        font-size: 14px;
      }
    }
  }
  .card-panel-col {
    width: 20%;
  }
  > div {
    width: 100%;
  }
  .quick_entry {
    :deep(.el-card__body)  {
      padding: 0;
    }
    margin-top: 20px;
    .enterIcon {
      display: flex;
      justify-content: center;
      padding: 20px 0;
      color: #666;
      cursor: pointer;
      > div {
        > img {
          width: 56px;
        }
        > div {
          margin-top: 10px;
          text-align: center;
          font-size: 14px;
        }
      }
    }
    .enterIcon:hover {
      background-color: #f9f9f9;
      color: #304156;
    }
  }
  .pend {
    margin-top: 20px;
    .list {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f2f2f2;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      color: #666;
      font-size: 14px;
      > span {
        color: #f04844;
        > span {
          color: #666;
        }
      }
    }
    .list:hover {
      color: #304156;
    }
  }
  .el_card {
    height: 60px;
    display: flex;
    align-items: center;
    // justify-content: center;
    > img {
      width: 55px;
    }
    > span {
      margin-left: 15px;
      font-size: 16px;
      color: #999;
      > :nth-child(3) {
        font-size: 20px;
        color: #666;
      }
    }
  }
}

:deep(.el-card__header) {
  padding: 13px 20px;
  background-color: #f3f3f3;
  > span {
    color: #666;
    font-weight: 700;
    font-size: 14px;
    font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  }
}
.text {
  font-family: "微软雅黑 Regular";
  font-size: 28px;
  color: #666;
}
:deep(.el-range-editor.is-active) {
  border-color: #304156;
}
:deep(.el-date-table td.today span) {
  color: #304156 !important;
}
.pick {
  > span {
    color: #656565;
    padding: 0 10px;
    cursor: pointer;
  }
  .pick1 {
    color: #304156;
  }
}
.pick span:hover {
  color: #304156;
}
</style>
<style>
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #304156 !important;
}
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: #304156 !important;
}
.el-date-table td.today span {
  color: #304156 !important;
}
.el-date-table td.today.start-date span {
  color: #fff !important;
}
.el-date-table__row td:hover {
  color: #304156 !important;
}
.el-date-range-picker__header button:hover {
  color: #304156 !important;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 200px !important;
  padding: 3px 0 3px 10px;
}
.el-date-editor .el-range-separator {
  padding: 0;
}
.el-date-editor .el-range__close-icon {
  display: none;
}
</style>
